<template>
  <div class="content">
    <div class="flex">

      <el-col class="flex" :span="7">
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in tabeoption.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <input class="input1" placeholder="请输入" v-model="search.keyWord" @keydown.13="toSearch" type="text">
      </el-col>
      <el-col class="flex  margin50" :span="4">
        <!-- <div  style="width: 50px; line-height: 50px; ">  <span>状态:</span> </div> -->
        <el-checkbox-group @change="change" v-model="checkboxStatus">
          <el-checkbox-button v-for="(city, index) in tabeoption.checkboxGroup1" :label="city.status" :key="city.name">
            {{ city.name }}</el-checkbox-button>
        </el-checkbox-group>
      </el-col>
      <slot  >
     
    </slot>
      <el-col class="flex  " :span="7">
        <el-date-picker v-model="dateArray" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" @change="changeDate"
          style="width:360px;">
        </el-date-picker>
      </el-col>
      <el-col class="flex  " :span="4">
        <el-button type="primary" icon="el-icon-search" size="small" @click="toSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
      </el-col>

    </div>


    <div>
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column v-for="(item, index )   in tabeoption.column " :key="item.id" :fixed="item.fixed"   :prop="item.prop"
          :label="item.label">


          <template slot-scope="slot">
            <div>
              <component    v-if="item.slot"  @childdete="educ"    @childchange="changetable"  :scope="slot" :is="item.slot"></component>
              <div v-else>{{ slot.row[item.prop] }}</div>
            </div>


          </template>




        </el-table-column>
      </el-table>
      <el-pagination background :page-size=6 @current-change="searchPage" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>





  </div>
</template>

<script>
import { orderlist } from '@/api/order'
import edit from '@/components/user/edit.vue'
import agent from '@/components/user/agent.vue'
// import clien from '@/components/user/clien.vue'
//  把组件全局化     函数式渲染
export default {
  props: {
    tabeoption: {
      type: Object,
      default: () => {
        return {
          postfn: orderlist,
          column: [
            { prop: "orderSn", label: "订单号", width: "120", },
            { prop: "CreateDate", label: "日期", width: "150" },
            { prop: "novel.name", label: "小说名", width: "120" },
            { prop: "actualPrice", label: "价格", width: "120" },
            { prop: "userId.username", label: "用户", slot: 'agent', width: "300" },
            { prop: "shareUserId", label: "代理", width: "120" },
            {
              prop: "right", label: "操作", width: "100",
              slot: 'edit'
            },

          ],
          checkboxGroup1: [{ name: "待付款", status: 0 }, { name: "已付款", status: 3 }],
          options: [
            {
              value: '0',
              label: '综合搜索'
            }, {
              value: 'orderSn',
              label: '订单'
            }, {
              value: 'shareUserId',
              label: '代理'
            },

            {
              value: 'userId',
              label: '用户'
            },
            {
              value: 'novel.name',
              label: '小说名'
            },
          ],



        }
      }
    }
  },
  components: {
    'edit': edit,
    "agent": agent,
    // "changepass": clien
  },
  data() {
    return {

      column: [
        { prop: "orderSn", label: "订单号", width: "120" },
        { prop: "CreateDate", label: "日期", width: "150" },
        { prop: "novel.name", label: "小说名", width: "120" },
        { prop: "actualPrice", label: "价格", width: "120" },
        { prop: "userId.username", label: "用户", width: "300" },
        { prop: "shareUserId", label: "代理", width: "120" },
        { prop: "right", label: "操作" },

      ],


      value: '0',




      // 总金额 待结算
      totalAmount: 780,
      toBeSettled: 100,


      dateArray: [],
      loading: false,
      total: 10,
      tableData: [],
      search: {
        page: 1,
        size: 6,
        keyWord: "",
        where: {},
        AndWhere: {}
        // 选范围
      },
      checkboxStatus: [],


      obj: [{ id: 1, weight: 888, message: 666, asdasd: "ASdasdasd", }, { id: 2, weight: 7877, message: 666 }],

    }
  },
  created() {
    this.rendtable()


  },

  methods: {

    educ(){
        this.tableData.splice(1,1)
    },





/* 
 监听 changetable  ,只要孩子 任意 孩子触发 emit(changetable , { id , index})
*/
    changetable(a){
        a.fn(this.tableData)
        // this.tableData.splice(1,0)
    },
    // 时间
    changeDate(e) {
      console.log(e);
      this.search.where['CreateDate'] = e
    },
    toSearch() {
      console.log(123231, "节流");
      this.rendtable()
    },


    //reset 
    reset() {
      this.search = {
        //  我们的参数 
        page: 1,
        size: 6,
        keyWord: "",
        where: {},
        AndWhere: {}
      }
      this.checkboxStatus = this.dateArray = []

    },
    searchPage(value) {
      //   变换页数
      this.search.page = value
      this.rendtable()



    },
    change(value) {


      this.search.AndWhere[this.$props.tabeoption.checkboxkey] = value
      this.rendtable()
    },
    async rendtable() {
      this.loading = true
      var newSearch = this.search

      if (this.value != "0" && this.search.keyWord != "") {
        let { keyWord, ...arg } = this.search
        console.log('arg', arg);

        //  深克隆   为了不影响后续 搜索
        newSearch = JSON.parse(JSON.stringify(arg))
        console.log('newSearch', newSearch)
        newSearch.AndWhere[`${this.value}`] = [keyWord]
      }


      // let result =  await orderlist( newSearch )
      let result = await this.$props.tabeoption.postfn(newSearch)
      // console.log( "请求的动态函数",this.$props.tabeoption.postfn);
      // let result = await this.$props.postfn( newSearch)
      /* 
                          为什么能够将这个请求的函数变成 动态?
                          主要是 我们后端接口 都有一个统一的 规范, 函数虽然是动态的, 但是 传参格式基本一模一样
                          
                          
                          假设 后端接口并不是统一的?   => 传参格式也得必须 动态 => 跟表单的固定功能配合一起, 其他暂时无法扩展
      
      
      
      */


      this.loading = false
      console.log(result);
      this.tableData = result.data.list
      this.total = result.data.pagination.total

    }
  },
}
</script>

<style lang="scss" scoped>
.content {
  padding: 30px;
}

.flex {
  display: flex;
  align-items: center;
}

// .margin50{
//     margin-left: 20px;
// }
.search {}

.input1 {
  //   -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%;

  &:hover {

    border-color: #409eff;
  }
}


.money {
  font-size: 7px;

  span {
    margin: 0 5px;
  }
}
</style>